const { createApp } = Vue
createApp({
  data() {
    return {
      heros: [],
      filterHeros: [], //用于存储筛选后待渲染的数据
      activePaytype: null, //记录当前付费状态
      inputStr: '',
    }
  },
  mounted() {
    // 获取数据
    axios.get('http://project.x-zd.net:3001/apis/herolist').then((res) => {
      this.heros = res.data.data.reverse()
      // 初始化filterHeros,深拷贝
      this.filterHeros = _.cloneDeep(this.heros)
      console.log(this.filterHeros)
    })
  },
  methods: {
    Check(value) {
      // 记录选中状态
      this.activePaytype = value
      if (value === null) {
        // 重置筛选状态
        this.activePaytype = ''
        this.filterHeros = _.cloneDeep(this.heros)
      } else if (value == 10 || value == 11) {
        //查询本周免费,新手推荐
        this.filterHeros = this.heros.filter((item) => {
          return item.pay_type == value
        })
      } else {
        //查询英雄类型
        this.filterHeros = this.heros.filter((item) => {
          return item.hero_type == value || item.hero_type2 == value
        })
      }
    },

    // 搜索框函数
    Search() {
      if (this.inputStr.trim()) {
        //在全部按钮下进行搜索
        this.activePaytype=undefined
        let res = this.heros.filter((item) => {
          return item.cname.includes(this.inputStr)
        })
        // 深拷贝,防止添加红色后污染原生数据,
        const result=_.cloneDeep(res)
        this.filterHeros = result.map((item) => {
          
            item.cname = item.cname.replace(
              this.inputStr,
              `<span class="red">${this.inputStr}</span>`
            )
            return item
          
        })
      }else{
        // 输入框中没用输入后,则跳转回全部按钮
        this.activePaytype=undefined
        this.filterHeros=_.cloneDeep(this.heros)
      }
    },
  },
  watch: {
    // 监听搜索框输入变化,实时筛选
    inputStr() {
      this.Search()
    },
  },
}).mount('#app')
